<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
            list-style:none;
        }
        .all{
            width:300px;
            height:200px;
            border:1px solid #ccc;
        }
        .all .btn{
            width:300px;
            height:30px;
        }
        .all .btn button{
            width:100px;
            float: left;
            height:30px;
        }
        .contall{
            width:300px;
            height:170px;
        }
        .contall ul{
            width:300px;
        }
        .contall ul li{
            width:300px;
            text-align: center;
            height:170px;
            line-height: 170px;
            font-size: 100px;
            background:skyblue;
            display: none;
        }
        .show{
            display: block !important;
        }
        .active{
            background:red;
            color: white;
            border:1px solid  #cccccc;
       </style>
</head>
<body>
    <div id="box" class="all">
         <div class="btn">
            <button class="active">
                1
            </button>
            <button>
                  2
            </button>
            <button>
                  3
            </button>
        </div>
        <div class="contall">
            <ul>
                <li class="show">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <div id="box2" class="all">
         <div class="btn">
            <button class="active">
                1
            </button>
            <button>
                  2
            </button>
            <button>
                  3
            </button>
        </div>
        <div class="contall">
            <ul>
                <li class="show">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <div id="box3" class="all" style="height: 230px;">
        <div class="btn">
            <button class="active">
                1
            </button>
            <button>
                  2
            </button>
            <button>
                  3
            </button>
        </div>
        <div class="contall">
            <ul>
                <li class="show">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>

        <div class="tbtn">
            <button class="btnl" style="width: 150px;float: left;height: 30px;">左</button>
            <button class="btnr" style="width: 150px; float: left;height: 30px;">右</button>>
        </div>
    </div>
    <script src="bundle.js"></script>
    <script>


         class Tabmenu{



             constructor(str){

                 this.pre   = document.querySelector(str);
                 this.btns  = this.pre.querySelectorAll(".btn button");
                 this.conts = this.pre.querySelectorAll(".contall li");
                 this.index =0
                 this.tabbtn();


             }

             tabbtn(){
                 var _this = this
                 for(let i=0;i<this.btns.length;i++){
                     this.btns[i].onclick =function () {
                         for(var j=0;j<_this.btns.length;j++){
                             _this.btns[j].className="";
                             _this.conts[j].className=""

                         }

                         _this.btns[i].className="active";
                         _this.conts[i].className="show"
                         _this.index =i;
                     }
                 }
             }

         }
//===================================================================
         class auto extends Tabmenu {
             constructor(id){

                 super(id);
                 this.autoFn();

                 this.index=0;
             }

             autoFn(){
                 var _this =this
                 _this.timer = setInterval(autoa,2000)
                 function autoa () {
                     _this.index++;
                     if(_this.index==3){
                         _this.index = 0
                     }
                     for(var i=0;i<_this.btns.length;i++){
                         _this.btns[i].className='';
                         _this.conts[i].className='';
                     }
                     _this.btns[_this.index].className="active";
                     _this.conts[_this.index].className="show"

                 }

             }

         }
//========================================================
         class tblr extends auto{
             constructor(id){
                 super(id);

                 this.btnl = this.pre.querySelector(".btnl")
                 this.btnr = this.pre.querySelector(".btnr")
                 this.tablrFn()
         }

         tablrFn(){
                var  _this =this;
                 _this.btnl.onclick=function () {
                     _this.index--
                     console.log(_this.index)
                     if(_this.index<0){
                         _this.index=2
                     }

                     for(var i=0;i<_this.btns.length;i++){
                         _this.btns[i].className='';
                         _this.conts[i].className='';
                     }
                     _this.btns[_this.index].className="active";
                     _this.conts[_this.index].className="show"


                 }
                 _this.btnr.onclick =function () {
                     _this.index++;
                     console.log(_this.index)
                     if(_this.index==3){
                         _this.index = 0
                     }

                     for(var i=0;i<_this.btns.length;i++){
                         _this.btns[i].className='';
                         _this.conts[i].className='';
                     }
                     _this.btns[_this.index].className="active";
                     _this.conts[_this.index].className="show"
                 }
         }
         }
         new Tabmenu("#box")
          new auto("#box2")
          new tblr("#box3")
    </script>

</body>
</html>